<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 样式绑定 -->
<title></title>
<style>
.box{
	width: 100px;
	height: 100px;
	background: green;
	}
	
.redbox{
	width: 100px;
	height: 100px;
	background: red;
}

</style>

<div id="app">
<!-- <div class="box"> -->
	<!-- <div class="redbox"> -->
	<!-- <div v-bind:class="{box:true,redbox:true}">显示红色,false显示绿色 -->
	<!-- <div v-bind:class="{box:true,redbox:false}"> !代表不是=非-->
	
	<!-- <div v-bind:class="{box:normal,redbox:!normal}"> -->
	
	<!-- //加点击事件 -->
	<!-- <div v-bind:class="{box:true,redbox:!normal}"@click="change()"> 不用加红色的宽和高-->
	<!-- <div v-bind:class="{box:normal,redbox:!normal}"@click="change()">要加宽和高 -->
	
  <!-- <div v-bind:class="{box:normal,redbox:!normal}"@mouseover="change()">不用点了 直接鼠标一碰就改变颜色（随机的） --> 
  
  <!-- 不用点了，鼠标进去是红色 拿出来是绿色 -->
  <div v-bind:class="{box:normal,redbox:!normal}"@mouseover="change()" 
  @mouseout="change()">	
  </div></br>
  
  <div v-bind:class="{box:normal,redbox:!normal}"@mouseover="change()"
  @mouseout="change()">	
  </div></br>
  
  <div v-bind:class="{box:normal,redbox:!normal}"@mouseover="change()"
  @mouseout="change()">	
  </div>
  
</div>
</head>

<body>
	<script>
		new Vue({
			el:"#app",
			data:{
				normal:true
				//normal:false 不显示
				
		  },
			//加点击事件
			methods:{
				change:function(){
					this.normal=!this.normal
				}
			}
			
			
			
		})
	</script>
</body>
</html>
